<template>
  <div>
    {{ msg }}
    <CommonChild msg="父组件传递的参数"  a="10" class="box" :b="30" @biubiu="fn">
      <h2>哈哈哈</h2>
    </CommonChild>
  </div>
</template>

<script>
import CommonChild from '@/components/CommonChild.vue'
export default {
  setup () {
    /* 
      组合式api的入口函数， 最先执行，发生组件初始化完成之前  
      setup函数中，不能访问this， 组件实例对象

      组件中所有业务定义在setup函数中
      返回值 对象， 对象中的属性方法 是暴露给模板的， 模板中可以直接使用
    */
    const msg = 'hello vue3'
    const fn = (val) => {
      alert(val)
    }
    return {
      msg,
      fn
    }
  },
  components: {
    CommonChild
  }
}
</script>

<style lang="scss" scoped>

</style>